{% extends 'front/orders_list/base_orders.html' %}

{% block title %}订单详情{% endblock %}

{% block css %}
    {{ super() }}
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/userinfo.css') }}">
    <script type="text/javascript" src="{{ url_for('static', filename='js/userinfo_in_head.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='js/fronts/deleteOrder.js') }}"></script>
{% endblock %}

{% block main %}

    <div class="container">

        <div class="col-md-12">
            <div class="text-center col-md-12">
                <hr>
                <h3>订单详情</h3>
            </div>
            <div class="col-md-2">
                <div class="recommend text-center" ng-controller="recommend_order">
                    <div class="text-center"><p>推荐</p></div>
                    <ul>
                        <li ng-repeat="book in recommend_order">
                            <a href="/product%3F{{ '{{book.id}}' }}">
                                <img src="{{ '{{book.img}}' }}" title="{{ '{{book.title}}' }}"
                                     alt="{{ '{{book.title}}' }}">
                                <p>{{ '{{book.title}}' }}</p>
                                <p>{{ '{{book.author}}' }}</p>
                            </a>
                            <hr>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="order-details col-md-offset-2">
                {% if order_details %}
                    <div class="info address">
                        <strong><span>配送地址：</span></strong>
                        <span>{{ order_details.address.province }}</span>
                        <span>{{ order_details.address.city }}</span>
                        <span>{{ order_details.address.details }}</span>
                        <strong><span>&nbsp;&nbsp;&nbsp;收货人：</span></strong>
                        <span>{{ order_details.address.name }}</span>
                        <span>{{ order_details.address.tel }}</span>
                    </div>
                    <div class="info">
                        <p><strong>订单号：</strong>{{ order_details.order_no }}</p>
                        <p><strong>订单金额：</strong>{{ order_details.amount }}￥</p>
                        <p><strong>订单状态：</strong>
                            {% if order_details.status == 0 %}
                                待付款
                            {% elif order_details.status == 1 %}
                                待发货
                            {% elif order_details.status == 2 %}
                                待收货
                            {% elif order_details.status == 3 %}
                                待评价
                            {% elif order_details.status == 4 %}
                                交易成功
                            {% elif order_details.status == 6 %}
                                申请退款
                            {% else %}
                                已失效
                            {% endif %}</p>
                        <div>
                            <strong>物流信息：</strong>
                            <ul>
                                {% for logistics in  order_details.logistics %}
                                    <li> | {{ logistics.create_time }} —— {{ logistics.info }}</li>
                                {% endfor %}
                            </ul>
                        </div>
                    </div>
                    <div class="books">
                        <ul>
                            {% for book in order_details.books %}
                                <li class="left" id="{{ book.book._id }}">
                                    <div class="book_img left">
                                        <a href="{{ url_for('products.product', id=book.book['_id']) }}" class="left">
                                            <img src="{{ book.book['img_url'] }}" title="{{ book.book['title'] }}"
                                                 alt="book-img">
                                        </a>
                                        <span style="display: none" class="book-info right"
                                              id="{{ book.book._id }}span">
                                        <span>{{ book.book['title'] }}</span>
                                        <br><br>
                                        <span>{{ book.book['price'] }}￥ <strong> x </strong> {{ book.num }}</span>
                                    </span>
                                    </div>
                                </li>
                                <script>
                                    var li_id = document.getElementById('{{ book.book._id }}');
                                    var span_id = document.getElementById('{{ book.book._id }}span');
                                    showmouseevent(li_id, span_id)
                                </script>
                            {% endfor %}
                        </ul>
                    </div>

                    <div class="info delete right">
                        {% if order_details.status in [4, 5, 6] %}
                            <a onclick="deleteOrder('{{ order_details.order_no }}')" class="btn btn-default">删除订单</a>
                        {% elif order_details.status == 0 %}
                            <a href="{{ url_for('orders.cancel', order_no=order_details.order_no) }}"
                               class="btn btn-default">取消交易</a>
                        {% else %}
                            <a href="{{ url_for('orders.refund', order_no=order_details.order_no) }}"
                               class="btn btn-info">申请退款</a>
                        {% endif %}
                    </div>
                    <div class="info right create-time">
                    <span id="{{ order_details.order_no }}"
                          class="effective-time">下单时间：{{ order_details.create_time }}
                    </span>
                        <script>
                            var newtime = new Date();
                            var endtime = new Date("{{ order_details.effective_time }}");
                            countDown((endtime.getTime() - newtime.getTime()) / 1000, function (msg) {
                                if (msg && ('{{ order_details.status }}' === '0')) {
                                    var span = document.getElementById('{{ order_details.order_no }}');
                                    span.innerHTML = msg;
                                    var div = document.createElement('div');
                                    div.setAttribute('class', 'to_pay');
                                    var a = document.createElement('a');
                                    a.innerText = '支付';
                                    a.setAttribute('href', '{{ url_for('products.pay', order_no=order_details.order_no) }}');
                                    a.setAttribute('class', 'pay');
                                    div.appendChild(a);
                                    span.appendChild(div);
                                } else {
                                    document.getElementById('{{ order_details.order_no }}').innerHTML = "下单时间：{{ order_details.create_time }}";
                                }
                            }, endtime);
                        </script>

                    </div>
                {% endif %}
            </div>
        </div>
    </div>
    <hr>
{% endblock %}